.container {
	background: var(--color-primary-background);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--size-xSmall);
	overflow: hidden;
	padding-bottom: var(--size-small);
	padding-left: calc(var(--size-xSmall) + 11px);
	padding-right: calc(var(--size-xSmall) + 11px);
	padding-top: var(--size-small);
	position: relative;
	text-align: left;
	transition: box-shadow 0.1s ease-in;
	width: 100%;

	&>p {
		font-size: 14px;
		font-weight: 200;
	}

	&.hasShadow {
		box-shadow: var(--box-shadow);
	}

	&::before {
		background-color: var(--color-purple);
		content: '';
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		transition: opacity 0.2s ease-in-out;
		width: 6px;
	}

	&:hover {
		border: 1px solid var(--color-purple);
		box-shadow: 0 0 9px rgba(86, 41, 198, 0.25);
	}
}

.deepLinkedComment {
	&::before {
		opacity: 1;
	}
}

.footer {
	display: flex;
	justify-content: space-between;
	padding-top: var(--size-medium);

	& .actions {
		column-gap: var(--size-xxSmall);
		display: flex;
	}
}

.iconLabel {
	align-items: center;
	column-gap: var(--size-small);
	display: flex !important;
}

.actionButton {
	padding-bottom: var(--size-xxSmall);
	padding-left: var(--size-medium);
	padding-right: var(--size-medium);
	padding-top: var(--size-xxSmall);
}

.tagsContainer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-xSmall);
	padding-top: var(--size-small);
}